<!-- 基础表格配置 -->
<template>
	<div>
		<el-form-item label="行数">
			<avue-input-number v-model="main.activeOption.showCount" :min="0" :disabled="disabled"> </avue-input-number>
		</el-form-item>
		<el-form-item label="对其方式">
			<avue-select v-model="main.activeOption.headerTextAlign" :dic="dicOption.textAlign" :disabled="disabled"> </avue-select>
		</el-form-item>

		<el-collapse accordion>
			<el-collapse-item title="序号设置">
				<el-form-item label="显示">
					<avue-switch v-model="main.activeOption.index" :disabled="disabled"></avue-switch>
				</el-form-item>
				<el-form-item label=" 名称">
					<avue-input v-model="main.activeOption.indexHeader" :disabled="disabled"> </avue-input>
				</el-form-item>
			</el-collapse-item>
			<el-collapse-item title="表头设置">
				<el-form-item label="高度">
					<avue-input-number v-model="main.activeOption.headerHeight" :disabled="disabled"> </avue-input-number>
				</el-form-item>
				<el-form-item label="显示">
					<avue-switch v-model="main.activeOption.showHeader" :disabled="disabled"> </avue-switch>
				</el-form-item>
				<el-form-item label="背景颜色">
					<avue-input-color type="textarea" v-model="main.activeOption.headerBackground" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<el-form-item label="字体大小">
					<avue-input-number v-model="main.activeOption.headerFontSize" :disabled="disabled" :max="200"></avue-input-number>
				</el-form-item>
				<el-form-item label="字体颜色">
					<avue-input-color v-model="main.activeOption.headerColor" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<el-form-item label="文字粗细">
					<avue-select v-model="main.activeOption.headerFontWeight" :dic="dicOption.fontWeight" :disabled="disabled"> </avue-select>
				</el-form-item>
			</el-collapse-item>
			<el-collapse-item title="表格设置">
				<el-form-item label="字体大小">
					<avue-input-number v-model="main.activeOption.cFontSize" :disabled="disabled" :max="200"></avue-input-number>
				</el-form-item>
				<el-form-item label="字体颜色">
					<avue-input-color v-model="main.activeOption.cColor" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<el-form-item label="文字粗细">
					<avue-select v-model="main.activeOption.cFontWeight" :dic="dicOption.fontWeight" :disabled="disabled"> </avue-select>
				</el-form-item>
				<el-form-item label="奇行颜色">
					<avue-input-color type="textarea" v-model="main.activeOption.nthColor" :disabled="disabled"></avue-input-color>
				</el-form-item>
				<el-form-item label="偶行颜色">
					<avue-input-color type="textarea" v-model="main.activeOption.othColor" :disabled="disabled"></avue-input-color>
				</el-form-item>
			</el-collapse-item>
			<el-collapse-item title="滚动设置">
				<el-form-item label="鼠标悬停">
					<avue-switch v-model="main.activeOption.hoverStop" :disabled="disabled"></avue-switch>
				</el-form-item>
				<el-form-item label="整页轮播">
					<avue-switch v-model="main.activeOption.carousel" :disabled="disabled"></avue-switch>
				</el-form-item>
				<el-form-item label="时间间隔(秒)">
					<avue-input-number v-model="main.activeOption.waitTime" :disabled="disabled"> </avue-input-number>
				</el-form-item>
			</el-collapse-item>
			<el-collapse-item title="预警设置">
				<avue-crud :option="scrollTableAlarmOption" :data="main.activeOption.alarmConfig" @row-save="rowSaveAlarm" @row-del="rowDelAlarm" @row-update="rowUpdateAlarm">
				</avue-crud>
			</el-collapse-item>
			<el-collapse-item title="表格列设置">
				<avue-crud :option="scrollTableOption" :data="main.activeOption.column" @row-save="rowSave" @row-del="rowDel" @row-update="rowUpdate">
					<template slot="menuLeft" slot-scope="{}">
						<el-button size="mini" icon="el-icon-s-operation" @click="openCode" type="primary">编辑数据</el-button>
					</template>
				</avue-crud>
			</el-collapse-item>
		</el-collapse>
		<codeedit @submit="codeClose" v-model="code.obj" v-if="code.box" :type="code.type" :visible.sync="code.box"></codeedit>
	</div>
</template>

<script>
import { scrollTableOption, dicOption, scrollTableAlarmOption } from '@/option/config';
import codeedit from '../../page/group/code';
export default {
	name: 'scrollTable',
	data() {
		return {
			disabled: this.contain.activeObj.isLock,
			dicOption: dicOption,
			scrollTableOption: scrollTableOption,
			scrollTableAlarmOption: scrollTableAlarmOption,
			code: {
				box: false,
				type: 'data',
				obj: {}
			}
		};
	},
	inject: ['main', 'contain'],
	components: {
		codeedit
	},
	methods: {
		rowSave(row, done) {
			this.main.activeOption.column.push(this.deepClone(row));
			done();
		},
		rowDel(row, index) {
			this.main.activeOption.column.splice(index, 1);
		},
		rowUpdate(row, index, done) {
			this.main.activeOption.column.splice(index, 1, this.deepClone(row));
			done();
		},
		rowSaveAlarm(row, done) {
			this.main.activeOption.alarmConfig.push(this.deepClone(row));
			done();
		},
		rowDelAlarm(row, index) {
			this.main.activeOption.alarmConfig.splice(index, 1);
		},
		rowUpdateAlarm(row, index, done) {
			this.main.activeOption.alarmConfig.splice(index, 1, this.deepClone(row));
			done();
		},
		codeClose(value) {
			console.log('this.code ', this.code);
			this.main.activeOption.column = value;
		},
		openCode() {
			this.code.obj = this.main.activeOption.column;
			this.code.box = true;
		}
	}
};
</script>

<style></style>
